<template>
  <a-modal
    v-model:open="open"
    :afterClose="resetForm"
    :confirmLoading="confirmLoading"
    :title="title"
    @ok="handleOk"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        @keyup.enter.passive="handleOk"
      >
        <a-row :gutter="10">
          <a-col :span="24">
            <a-form-item
              label="系统名称"
              name="title"
            >
              <a-input
                v-model:value="formState.title"
                placeholder="请输入"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="访问地址"
              name="url"
            >
              <a-input
                v-model:value="formState.url"
                placeholder="请输入"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="封面图"
              name="cover"
            >
              <a-input
                v-model:value="formState.cover"
                placeholder="请输入"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="账号"
              name="username"
            >
              <a-input
                v-model:value="formState.username"
                placeholder="请输入"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="密码"
              name="password"
            >
              <a-input
                v-model:value="formState.password"
                placeholder="请输入"
                allowClear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup>
import { useBoolean } from '@/hooks/index.js'
import { message } from 'ant-design-vue'
import Service from '@/utils/service.js'

const title = ref('新增')
const [open, toggleOpen] = useBoolean()
const [confirmLoading, toggleConfirmLoading] = useBoolean()

const form = {
  title: '',
  url: '',
  cover: '',
}
const formRef = ref()
let formState = reactive({ ...form })

const rules = {
  title: [
    {
      required: true,
      message: '请输入系统名称！',
      trigger: 'blur',
    },
  ],
  url: [
    {
      required: true,
      message: '请输入访问地址！',
      trigger: 'blur',
    },
  ],
}

const handleAdd = () => {
  title.value = '新增'
  toggleOpen(true)
}

const handleEdit = record => {
  title.value = '编辑'
  Object.assign(formState, record)
  toggleOpen(true)
}

const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      postFormState()
    })
    .catch(error => {})
}

const resetForm = () => {
  formState = reactive({ ...form })
  formRef.value.resetFields()
}

const emit = defineEmits(['modalOk'])
const postFormState = async () => {
  const isEdit = !!formState.id || formState.id === 0
  toggleConfirmLoading()
  const { code, msg } = await Service.postAction('/maintain/saveOrUpdate', toRaw(formState))
  toggleConfirmLoading()
  if (code === 200) {
    toggleOpen(false)
    message.success(`${isEdit ? '编辑' : '新增'}成功！`)
    emit('modalOk')
  } else {
    message.error(msg)
  }
}

defineExpose({ handleAdd, handleEdit })
</script>

<style lang="scss" scoped>
.account {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  &-input {
    width: calc(50% - 10px);
  }

  &-icon {
    color: #999;
    margin-left: 10px;

    &:hover {
      color: #777;
    }
  }
}
</style>
